import React, {Component} from 'react';
import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {actionCreators} from './store'
import {
    LoginWrapper,
    LoginBox,
    Input,
    Button,
} from './style'
class Login extends Component {

    componentDidMount() {
    }

    render() {
        const {loginState} = this.props;
        if(!loginState){
            return (
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder="账号" innerRef={(input) => {this.account = input}}/>
                        <Input placeholder="密码" type="password"  innerRef={(input) => {this.password = input}}/>
                        <Button onClick={() => this.props.login(this.account, this.password)}>登录</Button>
                    </LoginBox>
                </LoginWrapper>
            )
        }else{
            return <Redirect to='/'></Redirect>
        }
    }
}

const mapStateToProps = (state) => ({
    loginState: state.get('login').get('login'),
})
const mapDispatchToProps = (dispatch) => ({
    login(accountElement, passwordElement){ // innerRef拿到真实的dom
        console.log(accountElement.value, passwordElement.value)
        dispatch(actionCreators.login(accountElement.value, passwordElement.value));
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(Login);

